<template>
  <v-content >

    <mescroll-vue v-vuet-scroll="{ path: 'collectsalelist', name: 'content' }" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit" style="background-color: #ffffff;">
      <div class="mw-column-style">
        <div @click.stop="skipToDetail(item,index)" v-for="(item,index) in data.list">
          <v-saleitem @receiveClickBuy="skipClickBuy" :sale="item" ></v-saleitem>
        </div>
      </div>
    </mescroll-vue>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'
  import MescrollVue from 'mescroll.js/mescroll.vue'

  export default {
    mixins: [
      mapModules({data: 'collectsalelist'}),
      mapRules({store: [{ path: 'collectsalelist' }],need: [{ path: 'collectsalelist' }]}),
    ],
    components: {
      MescrollVue // 注册mescroll组件
    },
    data() {
      return {
        mescroll: null, // mescroll实例对象
        mescrollDown: {
          callback: this.downCallback,
          auto: false,
        }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
        mescrollUp: {htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',callback: this.upCallback, isBoth: true, auto: false,page:{num:1,size:15},noMoreSize:1}// 上拉加载的配置.
      }
    },
    methods: {

      fetchSaleList(isShowLoading,discount_id,collect_time){
        var that = this
        var params = {};
        params.discount_id = discount_id
        params.collect_time = collect_time
        httputil.request("collect/discounts", params, function (successresult) {
          that.data.has_next = successresult.collect_list.has_next == 0 ? false:true;
          if(discount_id == "" && collect_time == "") {
            that.$vuet.store.collectsalelist.$scroll.content.y = 0
            that.data.list = successresult.collect_list.discounts;
          } else {
            that.data.list = that.data.list.concat(successresult.collect_list.discounts);
          }

          if (successresult.collect_list.discounts.length != 0) {
            that.data.discount_id = that.data.list[that.data.list.length - 1].id
            that.data.collect_time = that.data.list[that.data.list.length - 1].collect_time
            that.data.current_length =successresult.collect_list.discounts.length
            that.mescroll.endSuccess(that.data.current_length,that.data.has_next)
          }else {
            that.mescroll.endSuccess(0,that.data.has_next)
          }

        }, function (errorresult) {

        }, "GET", isShowLoading,"collectsalelist")
      },

      mescrollInit(mescroll) {
        this.mescroll = mescroll
        if (this.data.needFetch) {
          var that = this
//          this.mescroll.optUp.hasNext = true
          this.data.discount_id=""
          this.data.collect_time=""
          this.fetchSaleList(true,this.data.discount_id,this.data.collect_time)
        } else {
          this.mescroll.endSuccess(this.data.current_length,this.data.has_next)
        }

      },
      downCallback(mescroll) {
        var that = this
        this.data.discount_id=""
        this.data.collect_time=""
        this.fetchSaleList(false,this.data.discount_id,this.data.collect_time)
      },
      upCallback(page, mescroll) {
        var that = this
        this.fetchSaleList(false,this.data.discount_id,this.data.collect_time)
      },
      skipClickBuy(item){
        this.data.needFetch = false
        if (window.location.href.indexOf(this.GLOBAL.skitToThirdWebSign) == -1) {
          window.location.replace(window.location.href + this.GLOBAL.skitToThirdWebSign)
        }
        window.location.href = item.link;
      },
      skipToDetail(item,index){
        this.data.needFetch = false
        setTimeout(() => {
          this.$router.push({ name: 'collectsalefullscreenlist', params: {list:this.data.list,index:index,hasNext:this.data.has_next}})
        }, 1)

      }
    },

    mounted() {
      this.data.needFetch = true
      console.log("mounted")
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .mescroll {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
  }
</style>
